jQuery(function($) {
    //页面加载完成事件,这里主要是写页面的页面点击切换
});
 //服务配置添加模板变量配置
function container_add_vars(){
    //给容器-服务配置模板添加变量值和内容
    var container_vars = hereDoc(function () {/*
        <div class="form-group">
            <div class="col-sm-12">
                <span><input type="text" id="form-field-1" placeholder="default" class="span4" /></span>
                <span class="span4">=</span>
                <span><input type="text" id="form-field-1" placeholder="default" class="span4" /></span>
            <button class="btn btn-success btn-xs " onclick="javascript:container_add_vars()">
                <i class="ace-icon glyphicon glyphicon-plus  bigger-110 icon-only"></i>
            </button>
            <button class="btn btn-danger btn-xs " onclick="javascript:container_add_vars()">
                <i class="ace-icon glyphicon  glyphicon-minus  bigger-110 icon-only"></i>
            </button>
            </div>  
        </div>
        */});
    $("#templete_vars").append(container_vars);
}
//添加资源配置文档
function container_add_resource(){
    //给容器-服务配置模板添加变量值和内容
    var container_vars = hereDoc(function () {/*
        <div class="form-group">
            <div class="col-sm-12">
                <span><input type="text" id="form-field-1" placeholder="default" class="span4" /></span>
                <span class="span4">=</span>
                <span><input type="text" id="form-field-1" placeholder="default" class="span4" /></span>
            <button class="btn btn-success btn-xs " onclick="javascript:container_add_resource()">
                <i class="ace-icon glyphicon glyphicon-plus  bigger-110 icon-only"></i>
            </button>
            <button class="btn btn-danger btn-xs " onclick="javascript:container_add_resource()">
                <i class="ace-icon glyphicon  glyphicon-minus  bigger-110 icon-only"></i>
            </button>
            </div>  
        </div>
        */});
    $("#templete_resource").append(container_vars);
}
function container_add_files(){
    //给容器-服务配置模板添加变量值和内容
    var container_vars = hereDoc(function () {/*
        <div class="form-group">
            <div class="col-sm-12">
                <span><input type="text" id="form-field-1" placeholder="default" class="span4" /></span>
                <span class="span4">=</span>
                <span><input type="text" id="form-field-1" placeholder="default" class="span4" /></span>
            <button class="btn btn-success btn-xs " onclick="javascript:container_add_file()">
                <i class="ace-icon glyphicon glyphicon-plus  bigger-110 icon-only"></i>
            </button>
            <button class="btn btn-danger btn-xs " onclick="javascript:container_add_file()">
                <i class="ace-icon glyphicon  glyphicon-minus  bigger-110 icon-only"></i>
            </button>
            </div>  
        </div>
        */});
    $("#templete_files").append(container_vars);
}
/****************新建主机时的复选矿按钮等操作****************************** */
function hereDoc(f) {　
    return f.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, '');
}
function showcontaintpage(pagename) {
    $(".page-content").hide();
    switch (pagename){
        case "alloverview":
            //总览显示页面
            if($("#alloverview").length>0){
                //当前页面内容是存在的只要调用显示操作显示出来
                $("#alloverview").show();
            }else{
                $.get("host-overview.html", function(data){
                    //alert("Data Loaded: " + data);
                    $(".page-content").replaceWith(data);
                });
            }
            break;
       case "containeroverview":
            //容器总览页面
            if($("#containeroverview").length>0){
                //当前页面内容是存在的只要调用显示操作显示出来
                $("#containeroverview").show();
            }else{
                $.get("container-overview.html", function(data){
                    //alert("Data Loaded: " + data);
                    $(".page-content").replaceWith(data);
                });
            }
            break;
       case "hostmanage":
            //主机管理页面
            if($("#hostmanage").length>0){
                //当前页面内容是存在的只要调用显示操作显示出来
                $("#hostmanage").show();
            }else{
                $.get("hostmanager.html", function(data){
                    //alert("Data Loaded: " + data);
                    $(".page-content").replaceWith(data);
                    //注册新建按钮，弹出新建主机窗口
                    $("#createServer").on(ace.click_event, function() {
                        var messcontext="";
                        $.get("host-add.html", function(data){
                            messcontext=data;
                            bootbox.dialog({
                            //首先获取到添加页面的模板样式
                            message: messcontext,
                             // dialog的类名
                            className: "bigdialog",
                            buttons: 			
                            {
                                "success" :
                                {
                                    "label" : "<i class='ace-icon fa fa-check'></i>确认创建",
                                    "className" : "btn-sm btn-success",
                                    "callback": function() {
                                        //Example.show("great success");
                                    }
                                },
                                "danger" :
                                {
                                    "label" : "重置",
                                    "className" : "btn-sm btn-danger",
                                    "callback": function() {
                                        //Example.show("uh oh, look out!");
                                    }
                                }, 
                                "click" :
                                {
                                    "label" : "取消",
                                    "className" : "btn-sm btn-primary",
                                    "callback": function() {
                                        //Example.show("Primary button");
                                    }
                                }
                            }
                        });
                        });
				});
                });
                
            }
            break;
       case "hostmonitor":
            //主机监控页面
            if($("#hostmonitor").length>0){
                //当前页面内容是存在的只要调用显示操作显示出来
                $("#hostmonitor").show();
            }else{
                $.get("hostmonitor.html", function(data){
                    //alert("Data Loaded: " + data);
                    $(".page-content").replaceWith(data);
                    var oldie = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
                    $('.easy-pie-chart.percentage').each(function(){                     
                        $(this).easyPieChart({
                            barColor: $(this).data('color'),
                            trackColor: '#EEEEEE',
                            scaleColor: false,
                            lineCap: 'butt',
                            lineWidth: 8,
                            animate: oldie ? false : 1000,
                            size:75
                        }).css('color', $(this).data('color'));
                    });
                });
            }
            break;
       case "container-service":
            //服务配置页面
            if($("#container-service").length>0){
                //当前页面内容是存在的只要调用显示操作显示出来
                $("#container-service").show();
            }else{
                $.get("container-service.html", function(data){
                    //alert("Data Loaded: " + data);
                    $(".page-content").replaceWith(data);
                });
            }
            break;
      case "container-temp":
            //容器模板管理页面
            if($("#container-temp").length>0){
                //当前页面内容是存在的只要调用显示操作显示出来
                $("#container-temp").show();
            }else{
                $.get("container-temp-manager.html", function(data){
                    //alert("Data Loaded: " + data);
                    $(".page-content").replaceWith(data);
                    //注册新建按钮，弹出层事件
                    $("#createServer").on(ace.click_event, function() {
                        var messcontext="";
                        $.get("container-temp-add.html", function(data){
                            messcontext=data;
                            bootbox.dialog({
                            //首先获取到添加页面的模板样式
                            message: messcontext,
                             // dialog的类名
                            className: "bigdialog",
                            buttons: 			
                            {
                                "success" :
                                {
                                    "label" : "<i class='ace-icon fa fa-check'></i>确认创建",
                                    "className" : "btn-sm btn-success",
                                    "callback": function() {
                                        //Example.show("great success");
                                    }
                                },
                                "danger" :
                                {
                                    "label" : "重置",
                                    "className" : "btn-sm btn-danger",
                                    "callback": function() {
                                        //Example.show("uh oh, look out!");
                                    }
                                }, 
                                "click" :
                                {
                                    "label" : "取消",
                                    "className" : "btn-sm btn-primary",
                                    "callback": function() {
                                        //Example.show("Primary button");
                                    }
                                }
                            }
                        });
                        });
				});
                });
            }
            break;
        case "container-manager":
            //容器管理页面
            if($("#container-manager").length>0){
                //当前页面内容是存在的只要调用显示操作显示出来
                $("#container-manager").show();
            }else{
                $.get("container-manager.html", function(data){
                    //alert("Data Loaded: " + data);
                    $(".page-content").replaceWith(data);
                });
            }
            break;
        case "containermonitor":
            //容器监控
            if($("#containermonitor").length>0){
                //当前页面内容是存在的只要调用显示操作显示出来
                $("#containermonitor").show();
            }else{
                $.get("containermonitor.html", function(data){
                    //alert("Data Loaded: " + data);
                    $(".page-content").replaceWith(data);
                    var oldie = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
                    $('.easy-pie-chart.percentage').each(function(){                     
                        $(this).easyPieChart({
                            barColor: $(this).data('color'),
                            trackColor: '#EEEEEE',
                            scaleColor: false,
                            lineCap: 'butt',
                            lineWidth: 8,
                            animate: oldie ? false : 1000,
                            size:107
                        }).css('color', $(this).data('color'));
                    });
                    $('.chosen-select').chosen({allow_single_deselect:true}); 
                    //绘制监控的历史数据
                    var myChart = echarts.init(document.getElementById('hiscpu'));

                    // 指定图表的配置项和数据
                    
                    var data1 = [];
                    var data2 = [];
                    var data3 = [];

                    var random = function (max) {
                        return (Math.random() * max).toFixed(3);
                    };

                    for (var i = 0; i < 500; i++) {
                        data1.push([random(15), random(10), random(1)]);
                        data2.push([random(10), random(10), random(1)]);
                        data3.push([random(15), random(10), random(1)]);
                    }

                    option = {
                        animation: false,
                        legend: {
                            data: ['scatter', 'scatter2', 'scatter3']
                        },
                        tooltip: {
                        },
                        xAxis: {
                            type: 'value',
                            min: 'dataMin',
                            max: 'dataMax',
                            splitLine: {
                                show: true
                            }
                        },
                        yAxis: {
                            type: 'value',
                            min: 'dataMin',
                            max: 'dataMax',
                            splitLine: {
                                show: true
                            }
                        },
                        dataZoom: [
                            {
                                type: 'slider',
                                show: true,
                                xAxisIndex: [0],
                                start: 1,
                                end: 35
                            },
                            {
                                type: 'slider',
                                show: true,
                                yAxisIndex: [0],
                                left: '93%',
                                start: 29,
                                end: 36
                            },
                            {
                                type: 'inside',
                                xAxisIndex: [0],
                                start: 1,
                                end: 35
                            },
                            {
                                type: 'inside',
                                yAxisIndex: [0],
                                start: 29,
                                end: 36
                            }
                        ],
                        series: [
                            {
                                name: 'scatter',
                                type: 'scatter',
                                itemStyle: {
                                    normal: {
                                        opacity: 0.8
                                    }
                                },
                                symbolSize: function (val) {
                                    return val[2] * 40;
                                },
                                data: data1
                            },
                            {
                                name: 'scatter2',
                                type: 'scatter',
                                itemStyle: {
                                    normal: {
                                        opacity: 0.8
                                    }
                                },
                                symbolSize: function (val) {
                                    return val[2] * 40;
                                },
                                data: data2
                            },
                            {
                                name: 'scatter3',
                                type: 'scatter',
                                itemStyle: {
                                    normal: {
                                        opacity: 0.8,
                                    }
                                },
                                symbolSize: function (val) {
                                    return val[2] * 40;
                                },
                                data: data3
                            }
                        ]
                    }

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                });
            }
            break;
    }
}
